<template>
	<zui-box>

		<!-- 头部导航 -->
		<zui-navbar title='商城搜索'></zui-navbar>


		<view class="search_box">
				<u-search :focus='true' :show-action="false" placeholder='请输入搜索关键词' v-model="keyword" @input="inputChange"
				 actionText="搜索"
					@search='search' :animation="false">
				</u-search>
		</view>
		
		<u-gap height="100rpx"></u-gap>
		
		<!-- //商品列表 或者 搜索历史 -->
		
		<view class="search-keyword">
			<!-- 页面主体 -->
			<view class="good_box" v-show="is_good">
				<mescroll-body  :height="mescroll_height +'px'" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
						:up="upOption">
				<view class="list">
					<view class="item" v-for="(item, index) in list" :key="index" @click="go_to(item)">
						<image :src="item.goods_thumb" class="image"></image>
						<view class="content">
							<view class="title ">{{item.goods_name}} {{item.goods_weight}}</view>
							<view class="small_text ">¥{{Math.trunc(item.goods_price*1) }}</view>
						</view>
					</view>
				</view>
				</mescroll-body>
			</view>
			<scroll-view class="keyword-box" v-show="!is_good" scroll-y>
				<view class="keyword-block" v-if="oldKeywordList.length>0">
					<view class="keyword-list-header">
						<view>历史搜索</view>
						<view @tap="oldDelete">
							<u-icon :name="del_icon"></u-icon>
						</view>
					</view>
					<view class="keyword">
						<view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword)" :key="index">
							{{keyword}}</view>
					</view>
				</view>
				<!-- 	//没有搜索历史记录 -->
				<view>
					<u-empty marginTop='150' v-if="oldKeywordList.length==0" mode="history" :icon="empty_icon"> </u-empty>
					
					
				</view>
			</scroll-view>
		</view>
		
		


	</zui-box>
</template>
<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				httpPath:this.httpPath,//获取图片前缀
				keyword: "",
				oldKeywordList: [],
				is_good: false,//是否是商品列表
				del_icon: require('@/static/img/del.png'),
				empty_icon: require('@/static/img/history.png'),
				search_none: require('@/static/img/search_none.png'),
				list: [],
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				},
				mescroll_height:''
				
			}
		},
		onShow() {
		this.loadOldKeyword();
		},
		created() {
			let that = this;
			   uni.getSystemInfo({ 
				success(res) {
				console.log('一',res.windowHeight); //可使用窗口高度
				that.mescroll_height = res.windowHeight - that.$u.getPx(uni.$u.props.navbar.height) - that.$u.sys().statusBarHeight -80
				
				console.log('二',that.mescroll_height)
				}
			})
		},
		methods: {
			go_to(item){
				uni.navigateTo({ url: '/pages/one_mouth/good_item?id='+item.id });
			},
			// 
			//下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback() {
				// setTimeout(() => {
				// 	this.mescroll.resetUpScroll();
				// }, 1000);
				// 禁止下拉
				this.mescroll.endSuccess(); //无参，注意结束下拉刷新是无参的
				
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				
				uni.$u.http
					.get('/app/product/list',{
						params: {
							goods_name:this.keyword,
						},
						custom: {
							auth: true,
							toast: false,
							catch: false,
						},
					},
					)
					.then(res => {
						console.log('返回的数据', res.list);
						this.mescroll.endSuccess(res.list.length);
						//设置列表数据
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.list); //追加新数据
						//保存
						this.saveKeyword(this.keyword)
					})
					.catch(res => {
						this.mescroll.endErr();
					});
			},
			//加载历史搜索,自动读取本地Storage
			loadOldKeyword() {
				uni.getStorage({
					key: 'search_02',
					success: (res) => {
						var search_02 = JSON.parse(res.data);
						this.oldKeywordList = search_02;
					}
				});
			},
			inputChange() {
				uni.$u.debounce(() => {
					console.log(this.keyword);
					//兼容引入组件时传入参数情况
					if (!this.keyword) {
						this.oldKeywordList = [];
						this.is_good = false;
						this.loadOldKeyword();
						return;
					}else{
						
						this.is_good = true;
						//以下示例截取淘宝的关键字，请替换成你的接口
						this.mescroll.resetUpScroll();
						
					}
				}, 500)
			},
			
			
			//清除历史搜索
			oldDelete() {
				uni.showModal({
					content: '确定清除历史搜索记录？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.oldKeywordList = [];
							uni.removeStorageSync('search_02')   // 删除该健名的数据
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//执行搜索
			doSearch(keyword) {
				this.keyword = keyword;
				this.is_good = true;
				this.list = [];
				//以下示例截取淘宝的关键字，请替换成你的接口
				this.mescroll.resetUpScroll();
			},
			//保存关键字到历史记录
			saveKeyword(keyword) {
				uni.getStorage({
					key: 'search_02',
					success: (res) => {
						var search_02 = JSON.parse(res.data);
						var findIndex = search_02.indexOf(keyword);
						if (findIndex == -1) {
							search_02.unshift(keyword);
						} else {
							search_02.splice(findIndex, 1);
							search_02.unshift(keyword);
						}
						//最多10个纪录
						search_02.length > 10 && search_02.pop();
						uni.setStorage({
							key: 'search_02',
							data: JSON.stringify(search_02)
						});
						this.oldKeywordList = search_02; //更新历史搜索
					},
					fail: (e) => {
						var search_02 = [keyword];
						uni.setStorage({
							key: 'search_02',
							data: JSON.stringify(search_02)
						});
						this.oldKeywordList = search_02; //更新历史搜索
					}
				});
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	
	/* //空数据 */
		/deep/.mescroll-empty {
			box-sizing: border-box;
			width: 100%;
			padding: 400rpx 50rpx;
			text-align: center;
		}
		
		
	//假搜索
	.search_box {
		height: 100rpx;
		// background: #0c0d21;
		width: 750rpx;
		margin: 0 auto;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		color: #fff;
		position: fixed;
		width: 100%;
		z-index: 999999;

		/deep/.u-search__content__input {
			color: #fff !important;
		}

		/deep/.u-search__action {
			color: #fff !important;
		}
	}
	
	
	
	
	.search-keyword {
		width: 100%;
		
		.keyword-list-box {
	
			padding-top: 10upx;
			border-radius: 20upx 20upx 0 0;
			
		}
		
		
		.keyword-box {
			border-radius: 20upx 20upx 0 0;
			
		}
		
		.keyword-box .keyword-block {
			padding: 10upx 0;
		}
		
		.keyword-box .keyword-block .keyword-list-header {
			width: 94%;
			padding: 10upx 3%;
			font-size: 27upx;
			color: #fff;
			display: flex;
			justify-content: space-between;
		}
		
		.keyword-box .keyword-block .keyword-list-header image {
			width: 40upx;
			height: 40upx;
		}
		
		.keyword-box .keyword-block .keyword {
			width: 94%;
			padding: 3px 3%;
			display: flex;
			flex-flow: wrap;
			justify-content: flex-start;
		}
		
		.keyword-box .keyword-block .hide-hot-tis {
			display: flex;
			justify-content: center;
			font-size: 28upx;
			color: #6b6b6b;
		}
		
		.keyword-box .keyword-block .keyword>view {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
			padding: 0 40rpx;
			margin: 10upx 20upx 10upx 0;
			height: 60upx;
			font-size: 28upx;
			background-color: #fff;
			color:#999;
		}
		
		
	}
	
	
	// 图标分类
	
	.list {
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item {
			box-sizing: border-box;
			padding: 30rpx;
			width: 322rpx;
			// height: 332rpx;
			font-size: 28rpx;
			border-radius: 5px;
			position: relative;
			margin: 10rpx 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #232539;
		}
		.image {
			width: 260rpx;
			border-radius: 8rpx;
			height: 260rpx;
			flex-shrink: 0;
			margin-bottom: 30rpx;
		
		}
		.content {
			text-align: center;
			.title {
				color: #F1B863;
				line-height: 60rpx;
				font-size: 28rpx;
			}
			.small_text{
				color: #E63A2A;
				line-height: 60rpx;
				font-size: 26rpx;
			}
		}
		
		
	}
	
	
</style>
